Midaspay Checkout SDK MOR Mode

SDK Overview

Launch available payment channels through Midaspay after order placement to provide seamless checkout experience.

Installation

Include the script in your HTML file:

Sandbox Environment:

<script src="https://sandbox-page.centauriglobal.com/frontend/static/midas-checkout-sdk.min.js"></script>

Production Environment:

<script src="https://cdn.harvestsharp.com/frontend/static/midas-checkout-sdk.min.js"></script>

API Reference

Initialization

Initialize the payment instance with configuration parameters:

MidasCheckoutSDK.init({
    url: 'xxx.xxx.xxx',
    type: 'inline',
    container: 'midas-mor-checkout',
    onEvents: (res) => {
        console.log('onEvents: ', res);
        // Response examples:

        // Payment pending state:
        // {
        //     "orderId": "46Y8YN7RY40",
        //     "orderStatus": "payment_pending",
        //     "type": "orderInfo"
        // }

        // Payment completed state:
        // {
        //     "orderId": "46Y8YN7RY40",
        //     "status": "completed",
        //     "type": "orderInfo"
        // }

        // Payment interrupted state:
        // {
        //     "action": "close_overlay"
        // }
    }
});

const checkout = () => {
    MidasCheckoutSDK.checkout();
};

Note: All event field values (action, status, result_code) are guaranteed to be lowercase. The SDK normalizes these fields automatically.

Parameters

Parameter	Description
url	Payment page endpoint URL (e.g., sandbox environment URL for loading the payment interface)
type	Display type for the payment window (`inline` for embedded display, `overlay` for modal popup)
container	DOM element ID where the payment component will be rendered (requires a pre-existing container element in the page)
onEvents	Callback function to handle payment events and receive real-time order status updates

Events

Event Property	Description
orderId	Unique order identifier (e.g., "46Y8YN7RY40")
status	Current payment status (`completed` for successful payment, `payment_pending` for pending payment)
type	Event data type (always "orderInfo" for order-related events)

Methods

Method	Description
init	Initialize the SDK instance with configuration parameters and set up the payment container
checkout	Initiate the payment process and render the payment interface
closeOverlay	Close the modal popup (only applicable when type is set to 'overlay')

Inline Demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Midas Checkout SDK Demo - Inline</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #midas-mor-checkout {
            width: 801px;
            height: 600px;
            margin: 0 auto;
        }
        html, body {
            width: 100%;
            height: 100%;
        }
        html {
            background: rgb(171, 171, 171);
            background-size: cover;
        }
        h1 {
            text-align: center;
            color: white;
            margin: 0.5em 0;
        }
        .btn-group {
            text-align: center;
            margin-top: 3em;
        }
        button {
            padding: 0.5em;
            font-size: 18px;
            border-radius: 8px;
            border: none;
            cursor: pointer;
        }
    </style>
    <script src="https://cdn.harvestsharp.com/frontend/static/midas-checkout-sdk.min.js"></script>
    <script>
        MidasCheckoutSDK.init({
            url: 'xxx.xxx.xxx',
            type: 'inline',
            container: 'midas-mor-checkout',
            onEvents: (res) => {
                console.log('onEvents: ', res);
                // Response examples:

                // Payment pending state:
                // {
                //     "orderId": "46Y8YN7RY40",
                //     "orderStatus": "payment_pending",
                //     "type": "orderInfo"
                // }

                // Payment completed state:
                // {
                //     "orderId": "46Y8YN7RY40",
                //     "status": "completed",
                //     "type": "orderInfo"
                // }

                // Payment interrupted state:
                // {
                //     "action": "close_overlay"
                // }
            }
        });

        const checkout = () => {
            MidasCheckoutSDK.checkout();
        };
    </script>
</head>
<body onload="checkout()">
    <h1>Midas Checkout SDK Demo - Inline</h1>
    <div id="midas-mor-checkout"></div>
</body>
</html>

Overlay Demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Midas Checkout SDK Demo - Overlay</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html, body {
            width: 100%;
            height: 100%;
        }
        html {
            background: #eeeeee;
            background-size: cover;
        }
        h1 {
            text-align: center;
            color: black;
            margin: 0.5em 0;
        }
        .btn-group {
            text-align: center;
            margin-top: 3em;
        }
    </style>
    <script src="https://cdn.harvestsharp.com/frontend/static/midas-checkout-sdk.min.js"></script>
    <script>
        MidasCheckoutSDK.init({
            url: 'xxx.xxx.xxx',
            type: 'overlay',
            container: 'midas-mor-checkout',
            onEvents: (res) => {
                console.log('onEvents: ', res);

                if (res?.status === 'completed') {
                    MidasCheckoutSDK.closeOverlay();
                }

                if (res?.action === 'close_overlay') {
                    // Handle payment interruption
                }

                // Response examples:

                // Payment pending state:
                // {
                //     "orderId": "46Y8YN7RY40",
                //     "status": "payment_pending",
                //     "type": "orderInfo"
                // }

                // Payment completed state:
                // {
                //     "orderId": "46Y8YN7RY40",
                //     "status": "completed",
                //     "type": "orderInfo"
                // }

                // Payment interrupted state:
                // {
                //     "action": "close_overlay"
                // }
            }
        });

        const checkout = () => {
            MidasCheckoutSDK.checkout();
        };
    </script>
</head>
<body>
    <h1>Midas Checkout SDK Demo - Overlay</h1>
    <div class="btn-group">
        <button onclick="checkout()">Checkout Overlay</button>
    </div>
</body>
</html>

SDK Overview​

Installation​

API Reference​

Initialization​

Parameters​

Events​

Methods​

Inline Demo​

Overlay Demo​